<template>
	<view class="content">
		<!-- 所有内容的容器 -->
		<view style="background-color: #ffffff;">
			<u-swiper :list="slide" interval="3000" duration="500" border-radius="0" height="450" @click="onClickSlide">
			</u-swiper>
		</view>
		<view style="position: fixed; top:0; width: 100%; padding: 12px;">
			<u-search placeholder="请输入搜索关键字" v-model="keyword" :show-action="false" bg-color="#ffffff" @custom="onSearch" @search="onSearch"></u-search>
		</view>
		<view style="padding: 3px 0px; background-color: #38a93e;">
			<an-notice-bar :text="notice" bgColor="#38a93e" color="#ffffff" :showSerial="false" @click="onNoticeClick">
			</an-notice-bar>
		</view>
		<view style="padding: 8px 12px; border: none;" v-if="weather">
			<semp-notice-bar :strText="weather" :scrollable="true" :round="true" icon="&#xe8bb;" color="#ff612a"
				bgColor="#fff2eb" setIconColor="#ff612a"></semp-notice-bar>
		</view>
		<view class="" style="padding: 8px 12px; background-color: #ffffff;">
			<u-grid :col="4" :border="false" @click="onClickNav">
				<u-grid-item v-for="(item,index) in nav" :key="item.id" :index="index"
					:custom-style="{padding: '3px 0px'}">
					<view class="grid-image">
						<u-image width="60rpx" height="60rpx" :src="item.image"></u-image>
					</view>
					<view class="grid-text">{{item.title}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="" style="padding: 12px; background-color: #ffffff;">
			<u-swiper :list="ad" border-radius="12"></u-swiper>
		</view>

		<view style="display: flex; align-items: center; padding:0px 12px; background-color: #ffffff;">
			<view style="display: inline-block; height: 18px; width: 3px; background-color: #38a93e;"></view>
			<view style="font-size: 15px; font-weight: bold; padding-left: 8px;">
				乡村热度榜
			</view>
			<view class="">

			</view>
		</view>
		<view style="padding:6px; background-color: #ffffff;">
			<swiper class="swiper" @change="hotvillagechange">
				<swiper-item v-for="(hotitem,hotindex) in hotvillage" :key="hotindex">
					<u-grid :col="2" hover-class="hover-class" :border="false">
						<u-grid-item v-for="(item, index) in hotitem" :index="index" :key="index"
							:custom-style="{padding: '6px 6px'}" @click="onClickHotVillage(item.id)">
							<u-image width="100%" height="100px" :src="item.cover_image" border-radius="12"></u-image>
							<view style="position: absolute; margin-top: -40px; color:#10aeff; font-size: 16px;">
								<u-icon name="thumb-up"></u-icon>TOP{{item.top}}
							</view>
						</u-grid-item>
					</u-grid>
				</swiper-item>
			</swiper>
			<view class="indicator-dots">
				<view class="indicator-dots-item" v-for="(hotitem,hotindex) in hotvillage" :key="hotindex"
					:class="[hotvillagecurrent == hotindex ? 'indicator-dots-active' : '']">
				</view>
			</view>
		</view>
		<view class="" style="background-color: #ffffff; margin-top: 8px;">
			<u-tabs :list="villagelist" :is-scroll="false" :current="villagecurrent" active-color="#38a93e"
				:height="100" :bar-width="180" @change="villagechange"></u-tabs>
		</view>
		<view style="background-color: #ffffff; padding: 12px;" v-if="villagecurrent == 0">
			<view v-for="(item, index) in village_list" :key="item.id" style="margin-bottom: 20rpx;" @click="onClickHotVillage(item.id)">
				<view>
					<u-image width="100%" height="360rpx" border-radius="12" :src="item.cover_image"></u-image>
				</view>
				<view style="display: flex; line-height: 70rpx; color: #aaaaaa;">
					<view style="flex: 1;"><u-icon name="map"></u-icon>{{item.v_name}}</view>
					<view>
						<u-icon name="account"></u-icon>{{item.user_number}}   
					</view>
					<view style="padding-left: 18rpx;">
						 <u-icon name="eye"></u-icon>{{item.view}}
					</view>
				</view>
				
			</view>
			<u-loadmore :status="status" :load-text="loadText" :margin-top="20"  />
		</view>
		<view style="background-color: #ffffff; padding: 12px;" v-if="villagecurrent == 1">
			<view style="display: flex;flex-flow: row wrap;">
				<view style="flex: 0 0 33.33%; margin-bottom: 30rpx;">
					<view style="width: 80rpx; margin: auto;">
						<u-image width="80rpx" height="80rpx" :src="$unishow + 'images/tj_icon_01.png'"></u-image>
					</view>
					<view style="text-align: center; font-size: 14px; font-weight: bold; line-height: 50rpx;">{{tj.village}}</view>
					<view style="text-align: center; font-size: 12px; color: #aaaaaa;">乡村数</view>
				</view>
				<view style="flex: 0 0 33.33%;">
					<view style="width: 80rpx; margin: auto;">
						<u-image width="80rpx" height="80rpx" :src="$unishow + 'images/tj_icon_02.png'"></u-image>
					</view>
					<view style="text-align: center; font-size: 14px; font-weight: bold; line-height: 50rpx;">{{tj.guest}}</view>
					<view style="text-align: center; font-size: 12px; color: #aaaaaa;">访客数</view>
				</view>
				<view style="flex: 0 0 33.33%;">
					<view style="width: 80rpx; margin: auto;">
						<u-image width="80rpx" height="80rpx" :src="$unishow + 'images/tj_icon_03.png'"></u-image>
					</view>
					<view style="text-align: center; font-size: 14px; font-weight: bold; line-height: 50rpx;">{{tj.rzcm}}</view>
					<view style="text-align: center; font-size: 12px; color: #aaaaaa;">认证村民</view>
				</view>
				<view style="flex: 0 0 33.33%;margin-bottom: 30rpx;">
					<view style="width: 80rpx; margin: auto;">
						<u-image width="80rpx" height="80rpx" :src="$unishow + 'images/tj_icon_04.png'"></u-image>
					</view>
					<view style="text-align: center; font-size: 14px; font-weight: bold; line-height: 50rpx;">{{tj.total_score}}</view>
					<view style="text-align: center; font-size: 12px; color: #aaaaaa;">积分总数</view>
				</view>
				<view style="flex: 0 0 33.33%;">
					<view style="width: 80rpx; margin: auto;">
						<u-image width="80rpx" height="80rpx" :src="$unishow + 'images/tj_icon_05.png'"></u-image>
					</view>
					<view style="text-align: center; font-size: 14px; font-weight: bold; line-height: 50rpx;">{{tj.post}}</view>
					<view style="text-align: center; font-size: 12px; color: #aaaaaa;">帖子数</view>
				</view>
				<view style="flex: 0 0 33.33%;">
					<view style="width: 80rpx; margin: auto;">
						<u-image width="80rpx" height="80rpx" :src="$unishow + 'images/tj_icon_06.png'"></u-image>
					</view>
					<view style="text-align: center; font-size: 14px; font-weight: bold; line-height: 50rpx;">{{tj.mall}}</view>
					<view style="text-align: center; font-size: 12px; color: #aaaaaa;">商城交易金额</view>
				</view>
				<view style="flex: 0 0 33.33%;margin-bottom: 30rpx;">
					<view style="width: 80rpx; margin: auto;">
						<u-image width="80rpx" height="80rpx" :src="$unishow + 'images/tj_icon_07.png'"></u-image>
					</view>
					<view style="text-align: center; font-size: 14px; font-weight: bold; line-height: 50rpx;">0</view>
					<view style="text-align: center; font-size: 12px; color: #aaaaaa;">党员数</view>
				</view>
				<view style="flex: 0 0 33.33%;">
					<view style="width: 80rpx; margin: auto;">
						<u-image width="80rpx" height="80rpx" :src="$unishow + 'images/tj_icon_08.png'"></u-image>
					</view>
					<view style="text-align: center; font-size: 14px; font-weight: bold; line-height: 50rpx;">0</view>
					<view style="text-align: center; font-size: 12px; color: #aaaaaa;">种植数</view>
				</view>
				<view style="flex: 0 0 33.33%;">
					<view style="width: 80rpx; margin: auto;">
						<u-image width="80rpx" height="80rpx" :src="$unishow + 'images/tj_icon_09.png'"></u-image>
					</view>
					<view style="text-align: center; font-size: 14px; font-weight: bold; line-height: 50rpx;">0</view>
					<view style="text-align: center; font-size: 12px; color: #aaaaaa;">养殖数</view>
				</view>
			</view>
		</view>


		<u-tabbar v-model="tabbar_current" :list="tabbar" :before-switch="beforeSwitch" active-color="#38a93e"></u-tabbar>
	</view>

</template>

<script>
	import AnNoticeBar from '@/components/an-notice-bar/an-notice-bar.vue';
	import sempNoticeBar from "@/components/semp-notice-bar/semp-notice-bar.vue"
	export default {
		components: {
			AnNoticeBar,
			sempNoticeBar
		},
		data() {
			return {
				keyword: '',
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				date: '2020-01-01',
				news: [],
				slide: [],
				nav: [],
				tabbar: [],
				notice: [],
				ad: [],
				tj: {},
				lng: 0,
				lat: 0,
				weather: '',
				hotvillage: [],
				hotvillagecurrent: 0,
				villagelist: [{
					name: '乡村统计'
				}, {
					name: '数据统计'
				}],
				villagecurrent: 0,
				status: 'loadmore',
				village_list: [],
				page: 1,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '已全部加载'
				},
				tabbar_current:0,
			}
		},
		onLoad: function() {
			var that = this;
			uni.request({
				url: this.$unishow + 'api/index/index',
				header: {
					token: this.token
				},
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					that.slide = res.data.slide;
					that.notice = res.data.notice;
					that.nav = res.data.nav;
					that.tabbar = res.data.bottomnav;
					that.tabbar[0].iconPath = 'home';
					that.tabbar[0].selectedIconPath = "home-fill";
					that.tabbar[4].iconPath = 'account';
					that.tabbar[4].selectedIconPath = "account-fill";
					that.ad = res.data.ad;
					that.hotvillage = res.data.hotvillage;
					that.tj = res.data.tj;
					uni.setNavigationBarTitle({
						title: res.data.siteName
					});
					that.loaddata();
				},
				fail: () => {},
				complete: () => {}
			});
			

			//微信jssdk
			if (this.$wechat && this.$wechat.isWechat()) {
				this.$wechat.share({
					title: "网兆丰欢迎您",
					desc: "",
					img: this.$unishow + "images/index_banner.jpg"
				}, '', {
					location: {
						type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
						success: function(res) {
							console.log('微信中获取位置');
							console.log(res);
							that.lng = res.longitude;
							that.lat = res.latitude;
							uni.request({
								url: that.$unishow + 'api/index/weather',
								method: 'GET',
								data: {
									lng: that.lng,
									lat: that.lat
								},
								success: res => {
									that.weather = '今日天气：' + res.data.msg;
								},
								fail: () => {},
								complete: () => {}
							});
						}
					}
				});
			}else{
				//获取位置
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.lng = res.longitude;
						that.lat = res.latitude;
						uni.request({
							url: this.$unishow + 'api/index/weather',
							method: 'GET',
							data: {
								lng: that.lng,
								lat: that.lat
							},
							success: res => {
								that.weather = '今日天气：' + res.data.msg;
							},
							fail: () => {},
							complete: () => {}
						});
					}
				});
			}
		},
		methods: {
			loaddata(){
				var that = this;
				this.status = 'loading';
				uni.request({
					url: this.$unishow + 'api/index/village_list',
					method: 'GET',
					data: {
						page: this.page
					},
					success: res => {
						this.page = ++this.page;
						if (res.data.list.length < 10) {
							that.status = "nomore"
						} else {
							that.status = "loadmore"
						}
						that.village_list = that.village_list.concat(res.data.list)
					},
					fail: () => {},
					complete: () => {}
				});
			},
			onReachBottom() { //上拉加载
				this.loaddata();
			},
			villagechange(index) {
				this.villagecurrent = index;
			},
			hotvillagechange(e) {
				this.hotvillagecurrent = e.detail.current;
			},

			async checkLogin() {
				this.userinfo = uni.getStorageSync('userinfo');
				this.token = this.userinfo.token;
				let res = await this.$api.myRequest({
					url: 'api/index/checklogin',
					header: {
						token: this.token
					}
				});
				console.log(res);
				if (res.data.code == 0) {
					await uni.showModal({
						title: '温馨提示',
						content: '你还没，请先登录',
						success(res) {
							if (res.confirm) {
								// 账户秘密登录
								let url = '/pages/login/login';
								uni.navigateTo({
									url: url
								});
							}
						}
					})
				}
			},
			goView(e) {
				console.log(e);
				uni.navigateTo({
					url: '../view/view?id=' + e
				});
			},
			onClickHotVillage(id) { //热度村点击
				console.log(id);
				window.location.href = this.$unishow + 'index/village?vid=' + id;
			},
			onClickNav(index) {
				console.log(index);
				console.log(this.nav);
				this.$tourl(this.nav[index].url);
			},
			onNoticeClick(index) {
				console.log(index);
				uni.navigateTo({
					url: '/pages/notice/view?id=' + this.notice[index].id 
				});
			},
			onSearch(keyword){   //搜索
				console.log(keyword);
				uni.navigateTo({
					url:'/pages/marticle/search?keyword=' + keyword
				})
			},
			onClickSlide(index) { //幻灯点击
				console.log(index);
				window.location.href = this.slide[index].url;
			},
			beforeSwitch(index) { //底部导航选择
				this.$tourl(this.tabbar[index].pagePath)
			}
		}
	}
</script>

<style>
	page {
		background-color: #eceef4;
	}

	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}

	.grid-image {
		padding: 8px 0px;
	}

	.swiper {
		height: 110px;
	}

	.indicator-dots {
		margin-top: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.indicator-dots-item {
		background-color: #C0C0C0;
		height: 6px;
		width: 6px;
		border-radius: 10px;
		margin: 0 3px;
	}

	.indicator-dots-active {
		background-color: #38a93e;
	}
</style>
